<template>
	<view class="doctor">
		<view class="doctor-info">
			<view class="doctor-pic">
				<img :src="doctorInfo.avatar" alt="" srcset="">
			</view>

			<view class="doctor-detail">
				<view class="doctor-name">{{doctorInfo.name}}</view>
				<view class="doctor-title">{{doctorInfo.title}}</view>
				<view class="doctor-department">出诊专科 : {{doctorInfo.department}}</view>
			</view>

		</view>


		<view class="schedule">

			<view class="top">
				<text class="doctor-department">{{doctorInfo.department}}</text>
				<text class="nowtime"> {{date}} </text>
			</view>

			<view class="week">
				<text v-for="(item,index) in days" :key="index"> {{item.week}} </text>
			</view>

			<view class="currenttime">
				<text :class="{'active' :islight == index }" v-for="(item,index) in days" :key="index"
					@click="selectDate(index)"> {{item.date}} </text>
			</view>

			<view class="schedule-detail">

				<view class="schedule-detail-item" v-for="(item,index) in schedule" :key="index" @click="pay(item.flag,doctorInfo.price,item.value)">

					<text class="time">{{item.value}} </text>

					<view class="price-statue">
						<text class="money"> ￥{{doctorInfo.price}} </text>

						<text class="status" v-if="item.flag"> 已满诊 </text>

						<text class="iconfont icon-xiangyoujiantou" v-else></text>
					</view>

				</view>


			</view>
		</view>

		<view class="doctor-introduce">
			<view class="title">擅长 </view>
			<view class="content">擅长: {{doctorInfo.goodAt}}</view>

			<view class="title">医生简介</view>
			<view class="content">主任医师，博士研究生，博士生导师</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '', //当前日期
				days: '',
				islight: 0,
				doctorInfo: '',
				schedule: [
					
					{
						value:'08:00-08:30',
						flag:false
					},
					{
						value:'08:30-09:00',
						flag:false
					},
					{
						value:'09:00-09:30',
						flag:false
					},
					{
						value:'09:30-10:00',
						flag:false
					},
					{
						value:'10:00-10:30',
						flag:false
					},
					
					{
						value:'10:30-11:00',
						flag:false
					},
					{
						value:'11:00-11:30',
						flag:false
					},
					{
						value:'14:30-15:00',
						flag:false
					},
					{
						value:'15:00-15:30',
						flag:false
					},
					{
						value:'15:30-16:00',
						flag:false
					},
					{
						value:'16:00-16:30',
						flag:false
					},
					{
						value:'16:30-17:00',
						flag:false
					}
				],
				info: '',
				list:[]
			}
		},
		onLoad(options) {
			console.log("doctorPhone=>", options.doctorPhone)
			console.log("doctorId=>", options.doctorId)
			// 当前日期
			let nowTime = new Date().toLocaleString().substring(0, 10)
			let regTime = /\//g
			this.date = nowTime.replace(regTime, '.')
			console.log("nowTime=>", nowTime)
			console.log("this.date=>", this.date)
			this.getday2()
			// 得到医生的数据的基本信息
			uni.request({
				url: 'http://192.168.36.46:3000/doctor/getTelDoctorInfo?phone=' + options.doctorPhone
			}).then(res => {
				console.log("点击的医生=>", res)
				this.doctorInfo = res.data.data
			})

			// 得到医生的排班
			uni.request({
				url: 'http://192.168.36.46:3000/doctor/getMyPatien?doctorId=' + options.doctorId
			}).then(res => {
				console.log("根据id获取医生排班=>", res)
				this.info = res.data.result;
				this.selectDate(0)
			})
			
			
		},
		methods: {
			getday2() {
				//今天的时间
				var day3 = new Date();
				// day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
				day3.setTime(day3.getTime());
				var s3 =
					day3.getFullYear() + "-" + (day3.getMonth() + 1) + "-" + day3.getDate();
				console.log("s3=>", s3);

				let days = [];
				for (let i = 0; i <= 24 * 6; i += 24) {
					//明天加上明天的后6天
					// let dateItem=new Date(Date.getTime() - i * 60 * 60 * 1000);	//使用（当天）时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
					let dateItem = new Date(day3.getTime() + i * 60 * 60 * 1000); //使用（第二天）时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
					let y = dateItem.getFullYear(); //获取年份
					let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1

					let d = dateItem.getDate(); //获取日期
					m = this.addDate0(m); //给为单数的月份补零
					d = this.addDate0(d); //给为单数的日期补零
					let time = y + "-" + m + "-" + d; //组合
					let valueItem = d; //我只要一个日期
					var myddy = dateItem.getDay(); //获取存储当前日期
					var weekday = ["日", "一", "二", "三", "四", "五", "六"];
					console.log("今天是：" + weekday[myddy]);
					days.push({
						time: `${time}`,
						date: `${valueItem}`,
						week: `${weekday[myddy]}`,
						name: `${i}`,
						month: `${m}`
					}); //添加至数组
				}
				console.log("最近七天日期：", days);
				this.days = days

				// return days;
			},



			//给日期加0
			addDate0(time) {
				if (time.toString().length == 1) {
					time = "0" + time.toString();
				}
				return time;
			},


			// 点击高亮事件
			selectDate(index) {
				this.islight = index
				// console.log("time=>", this.days[index].time)				
				
				this.schedule.forEach( item =>{
					item.flag = false
				})

				this.info.forEach((item, index) => {
					// console.log('1111',item)
					// console.log(item.time, this.days[this.islight].time,item.time == this.days[this.islight].time,item.date)
					if (item.time == this.days[this.islight].time) {
						// console.log("item",item)
						this.schedule.forEach((data,index)=>{
								// console.log('4',data.value,item.date,data.value==item.date)
							if(data.value==item.date){
								// console.log('3',item,data)
								   data.flag=true;
							
							}
						
						})
					}
				});

				console.log("this.schedule",this.schedule)


			},
			// 匹配医生排班
	         pay(flag,price,value){
				if(flag){
					return
				}else{
					console.log('111',flag);
					console.log(price);
					console.log(value);
					uni.navigateTo({
						url:"../../pages/payfor/payfor?price="+price+"&name="+this.doctorInfo.name+"&doctorInfo="+this.doctorInfo.department+"&value="+value
					})
				}
			 }
		}

	}
</script>

<style lang="scss">
	* {
		padding: 0px;
		margin: 0px;
	}

	.doctor {
		width: 100%;
		background-color: #f6f7f9;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 16px;
		padding-bottom: 16px;

	}

	.doctor-info {
		display: flex;

		.doctor-pic {
			width: 70px;
			height: 85px;
			margin-right: 25px;

			img {
				width: 70px;
				height: 85px;
				border-radius: 5px;
			}
		}

		.doctor-detail {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.doctor-name {
				font-size: 25px;
				font-weight: 800;
			}
		}
	}

	.schedule {
		width: 100%;
		// height: 500px;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px;
		margin-top: 30px;
		box-sizing: border-box;

		.top {
			display: flex;
			justify-content: space-between;

			.doctor-department {
				font-size: 20px;
				font-weight: 600;
			}

			.nowtime {
				color: #858585;
			}
		}

		.week {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;

			text {
				display: inline-block;
				color: #b7b7b7;
				width: 37px;
				height: 37px;
				line-height: 37px;
				text-align: center;
			}
		}

		.currenttime {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			font-weight: 500;

			text {
				display: inline-block;
				width: 37px;
				height: 37px;
				line-height: 37px;
				text-align: center;
			}

			.active {
				color: #ffffff;
				background-color: #6bcbb6;
				border-radius: 5px;
			}
		}

		.schedule-detail {
			margin-top: 20px;

			.schedule-detail-item {
				display: flex;
				justify-content: space-between;
				border-top: 2px solid #fbfbfb;
				height: 50px;
				line-height: 50px;

				.money {
					// margin-left: 47px;
					color: #f2a954;
				}
			}
		}
	}

	.doctor-introduce {
		margin-top: 30px;

		.title {
			margin-top: 10px;
			font-family: '黑体';
			font-size: 17px;
			font-weight: 700;
			line-height: 30px;
		}

		.content {
			line-height: 25px;
		}

	}
</style>